<style lang="less">
    @import './editable-table.less';
</style>

<template>
    <div>
        <Table :ref="refs" stripe :loading="isLoading"
        :columns="columnsList" :data="thisTableData" border disabled-hover></Table>

        <div style="margin: 10px;overflow: hidden">
            <div style="float: right;">
                <Page :total="totalRecord" :current="currentPage" :page-size="20" @on-change="changePage" show-elevator></Page>
            </div>
        </div>
    </div>
</template>

<script>
const editButton = (vm, h, currentRow, index) => {
    return h('Button', {
        props: {
            type: 'primary',
            icon: 'edit',
            size: 'small',
            shape: 'circle'
        },
        style: {
            margin: '2px 5px'
        },
        on: {
            'click': () => {
                vm.$emit('editOne',currentRow);
            }
        }
    },'编辑');
};
const deleteButton = (vm, h, currentRow, index) => {
    return h('Poptip', {
        props: {
            confirm: true,
            title: '您确定要删除这条数据吗?',
            transfer: true
        },
        on: {
            'on-ok': () => {
                vm.$emit('deleteOne', currentRow, index);
            }
        }
    }, [
        h('Button', {
            style: {
                margin: '2px 5px'
            },
            props: {
                type: 'error',
                placement: 'top',
                icon: 'trash-a',
                size: 'small',
                shape: 'circle'
            }
        }, '删除')
    ]);
};
const enableSwitch = (vm, h, currentRow, index) => {
    return h('i-switch', {
                style: {
                    margin: '0 5px'
                },
                props: {
                    value: currentRow.status,
                    size: 'large',
                    trueValue: false,
                    falseValue: true
                },
                on: {
                    'on-change': (status) => {
                        vm.$emit('enableOne', status, currentRow);
                    }
                }
            },
                [
                    h('span', {
                        slot: 'open'
                    }, '禁用'),
                    h('span', {
                        slot: 'close'
                    }, '启用')
                ]
            );
};
const addButton = (vm, h, currentRow, index) => {
    return h('Button', {
        props: {
            type: 'info',
            size: 'small',
            icon: 'plus',
            shape: 'circle'
        },
        style: {
            margin: '2px 5px'
        },
        on: {
            'click': () => {
                vm.$emit('addOne', currentRow);
            }
        }
    }, '添加子菜单');
};
const stopButton = (vm, h, currentRow, index) => {
    return h('Button', {
        props: {
            type: 'warning',
            size: 'small',
            icon: 'stop',
            shape: 'circle'
        },
        style: {
            margin: '2px 5px'
        },
        on: {
            'click': () => {
                vm.$emit('stopOne', currentRow);
            }
        }
    }, '暂停');
};
const resumeButton = (vm, h, currentRow, index) => {
    return h('Button', {
        props: {
            type: 'warning',
            size: 'small',
            icon: 'play',
            shape: 'circle'
        },
        style: {
            margin: '2px 5px'
        },
        on: {
            'click': () => {
                vm.$emit('resumeOne', currentRow);
            }
        }
    }, '恢复');
};
const runButton = (vm, h, currentRow, index) => {
    return h('Button', {
        props: {
            type: 'info',
            size: 'small',
            icon: 'android-send',
            shape: 'circle'
        },
        style: {
            margin: '2px 5px'
        },
        on: {
            'click': () => {
                vm.$emit('runOne', currentRow);
            }
        }
    }, '立即执行');
};
const auditButton = (vm, h, currentRow, index) => {
    return h('Button', {
        props: {
            type: 'primary',
            size: 'small',
            icon: 'gear-b',
            shape: 'circle'
        },
        style: {
            margin: '2px 5px'
        },
        on: {
            'click': () => {
                vm.$emit('auditOne', currentRow);
            }
        }
    }, '审核');
};
const incellEditBtn = (vm, h, param) => {
    if (vm.hoverShow) {
        return h('div', {
            'class': {
                'show-edit-btn': vm.hoverShow
            }
        }, [
            h('Button', {
                props: {
                    type: 'text',
                    icon: 'edit'
                },
                on: {
                    click: (event) => {
                        vm.edittingStore[param.index].edittingCell[param.column.key] = true;
                        vm.thisTableData = JSON.parse(JSON.stringify(vm.edittingStore));
                    }
                }
            })
        ]);
    } else {
        return h('Button', {
            props: {
                type: 'text',
                icon: 'edit'
            },
            on: {
                click: (event) => {
                    vm.edittingStore[param.index].edittingCell[param.column.key] = true;
                    vm.thisTableData = JSON.parse(JSON.stringify(vm.edittingStore));
                }
            }
        });
    }
};
const saveIncellEditBtn = (vm, h, param) => {
    return h('Button', {
        props: {
            type: 'text',
            icon: 'checkmark'
        },
        on: {
            click: (event) => {
                vm.edittingStore[param.index].edittingCell[param.column.key] = false;
                vm.thisTableData = JSON.parse(JSON.stringify(vm.edittingStore));
                vm.$emit('input', vm.handleBackdata(vm.thisTableData));
                vm.$emit('on-cell-change', vm.edittingStore[param.index], param.index, param.column.key);
            }
        }
    });
};
const cellInput = (vm, h, param, item) => {
    return h('Input', {
        props: {
            type: 'text',
            value: vm.edittingStore[param.index][item.key]
        },
        on: {
            'on-change' (event) {
                let key = item.key;
                vm.edittingStore[param.index][key] = event.target.value;
            }
        }
    });
};
const normalButton = (vm, h, currentRow, index) => {
    return h('Button', {
        props: {
            type: 'info',
            size: 'small',
            icon: 'android-more-horizontal'
        },
        style: {
            margin: '2px 5px'
        },
        on: {
            'click': () => {
                vm.$emit('normalOne', currentRow);
            }
        }
    }, '详情');
};
export default {
    name: 'editableTable',
    props: {
        refs: String,
        isLoading: Boolean,
        columnsList: Array,
        value: Array,
        url: String,
        totalRecord: Number,
        currentPage: Number,
        permissionsPrefix: String,
        editIncell: {
            type: Boolean,
            default: false
        },
        hoverShow: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            columns: [],
            thisTableData: [],
            edittingStore: []
        };
    },
    created () {
        this.init();
    },
    methods: {
        init () {
            let vm = this;
            let editableCell = this.columnsList.filter(item => {
                if (item.editable) {
                    if (item.editable === true) {
                        return item;
                    }
                }
            });
            let cloneData = JSON.parse(JSON.stringify(this.value));
            let res = [];
            let access = localStorage.getItem('access').split(',');
            res = cloneData.map((item, index) => {
                let isEditting = false;
                if (this.thisTableData[index]) {
                    if (this.thisTableData[index].editting) {
                        isEditting = true;
                    } else {
                        for (const cell in this.thisTableData[index].edittingCell) {
                            if (this.thisTableData[index].edittingCell[cell] === true) {
                                isEditting = true;
                            }
                        }
                    }
                }
                if (isEditting) {
                    return this.thisTableData[index];
                } else {
                    this.$set(item, 'editting', false);
                    let edittingCell = {};
                    editableCell.forEach(item => {
                        edittingCell[item.key] = false;
                    });
                    this.$set(item, 'edittingCell', edittingCell);
                    return item;
                }
            });
            this.thisTableData = res;
            this.edittingStore = JSON.parse(JSON.stringify(this.thisTableData));
            this.columnsList.forEach(item => {
                if (item.editable) {
                    item.render = (h, param) => {
                        let currentRow = this.thisTableData[param.index];
                        if (!currentRow.editting) {
                            if (this.editIncell) {
                                return h('Row', {
                                    props: {
                                        type: 'flex',
                                        align: 'middle',
                                        justify: 'center'
                                    }
                                }, [
                                    h('Col', {
                                        props: {
                                            span: '22'
                                        }
                                    }, [
                                        !currentRow.edittingCell[param.column.key] ? h('span', currentRow[item.key]) : cellInput(this, h, param, item)
                                    ]),
                                    h('Col', {
                                        props: {
                                            span: '2'
                                        }
                                    }, [
                                        currentRow.edittingCell[param.column.key] ? saveIncellEditBtn(this, h, param) : incellEditBtn(this, h, param)
                                    ])
                                ]);
                            } else {
                                return h('span', currentRow[item.key]);
                            }
                        } else {
                            return h('Input', {
                                props: {
                                    type: 'text',
                                    value: currentRow[item.key]
                                },
                                on: {
                                    'on-change' (event) {
                                        let key = param.column.key;
                                        vm.edittingStore[param.index][key] = event.target.value;
                                    }
                                }
                            });
                        }
                    };
                }
                if (item.handle) {
                    item.render = (h, param) => {
                        let currentRowData = this.thisTableData[param.index];
                        let children = [];
                        item.handle.forEach(item => {
                            if (item === 'edit' && access.indexOf(this.permissionsPrefix+':update') > -1) {
                                children.push(editButton(this, h, currentRowData, param.index));
                            } else if (item === 'enable' && access.indexOf(this.permissionsPrefix+':enable') > -1) {
                                children.push(enableSwitch(this, h, currentRowData, param.index));
                            } else if (item === 'add') {
                                if (currentRowData.pid === 0) {
                                    children.push(addButton(this, h, currentRowData, param.index));
                                }
                            } else if (item === 'delete' && access.indexOf(this.permissionsPrefix+':delete') > -1) {
                                children.push(deleteButton(this, h, currentRowData, param.index));
                            } else if (item === 'stop' && access.indexOf(this.permissionsPrefix+':pause') > -1) {
                                if (currentRowData.status === 0) {
                                    children.push(stopButton(this, h, currentRowData, param.index));
                                } 
                            } else if (item === 'resume' && access.indexOf(this.permissionsPrefix+':resume') > -1) {
                                if (currentRowData.status === 1) {
                                    children.push(resumeButton(this, h, currentRowData, param.index));
                                } 
                            } else if (item === 'run' && access.indexOf(this.permissionsPrefix+':run') > -1) {
                                children.push(runButton(this, h, currentRowData, param.index));
                            } else if (item === 'audit' && access.indexOf(this.permissionsPrefix+':audit') > -1) {
                                children.push(auditButton(this, h, currentRowData, param.index));
                            } else if (item === 'info') {
                                children.push(normalButton(this, h, currentRowData, param.index));
                            }
                        });
                        return h('div', children);
                    };
                }
            });
        },
        changePage (page) {
            this.$emit('changePage', page);
        },
        handleBackdata (data) {
            let clonedData = JSON.parse(JSON.stringify(data));
            clonedData.forEach(item => {
                delete item.editting;
                delete item.edittingCell;
                delete item.saving;
            });
            return clonedData;
        }
    },
    watch: {
        value (data) {
            this.init();
        }
    }
};
</script>
